<!-- 横排图文滚动 -->
<template>
	<view
		:style="'order:'+Item.order+';'"
		class="block-horizontal-sliding-list">
		<view class="post-list">
			<scroll-view scroll-x :style="Item.margin" :show-scrollbar="false">
				<template v-if="Item.customized.length">
					<view
						@click="$_To(item.url)"
						class="_for"
						v-for="item in Item.customized">
						<view class="image">
							<image :src="item.backgroundImage?item.backgroundImage:''" mode="widthFix" lazy-load></image>
						</view>
						<view class="_for-box">
							<view class="_top">
								<view class="_top-left">
									<text class="iconfont icon-remen"></text>
									<text class="text">{{item.text}}</text>
								</view>
							</view>
							<view class="_bottom">
								<view class="_title">{{item.title}}</view>
								<view class="_info">
									<text>{{item.info}}</text>
								</view>
							</view>
						</view>
					</view>
				</template>
				<template v-else>
					<template v-if="listState == 'success'">
						<view
							@click="$_To('post/post?pid='+item.pid)"
							class="_for"
							v-for="item in list">
							<view class="image">
								<image :src="item.files ? item.files.images[0].imageBigUrl : ''" mode="widthFix"></image>
							</view>
							<view class="_for-box">
								<view class="_top">
									<view class="_top-left">
										<text class="iconfont icon-remen"></text>
										<text class="text">{{item.group?item.group.gname:''}}</text>
									</view>
								</view>
								<view class="_bottom">
									<view class="_title">
										{{item.title?item.title:$_filterHtml(item.content)}}</view>
									<view class="_info">
										<text>{{item.author.nickname}}</text>
										<text>{{item.createdTimeAgo}}</text>
									</view>
								</view>
							</view>
						</view>
					</template>
					<template v-if="listState == 'loading'">
						<view class="loading-css" style="width: 600rpx;height: 250rpx;margin: 0 0 0 25rpx;display: inline-block;"></view>
						<view class="loading-css" style="width: 600rpx;height: 250rpx;margin: 0 0 0 25rpx;display: inline-block;"></view>
					</template>
					<template v-if="listState == 'empty'">
						<view class="loading-css" style="width: 600rpx;height: 250rpx;margin: 0 0 0 25rpx;display: inline-flex;align-items: center;justify-content: center;color: #C0C4CC;">暂无数据</view>
						<view class="loading-css" style="width: 600rpx;height: 250rpx;margin: 0 0 0 25rpx;display: inline-flex;align-items: center;justify-content: center;color: #C0C4CC;">暂无数据</view>
					</template>
				</template>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"block-horizontal-sliding-list",
		props:{
			Item:{
				type:Object,
				default:null
			}
		},
		data() {
			return {
				list:[],
				listState:"loading"
			};
		},
		mounted(){
			if(!this.Item.customized.length){
				this.getList();
			}
		},
		methods: {
			getList(){
				this.$_Request(
					"GET","/api/v2/post/list",
					{
						"mapId": this.Item.getList.mapId,
						"mapLng": this.Item.getList.mapLng,
						"mapLat": this.Item.getList.mapLat,
						"uidOrUsername": this.Item.getList.uidOrUsername,
						"hid": this.Item.getList.hid,
						"gid": this.Item.getList.gid,
						"includeSubgroups": this.Item.getList.includeSubgroups,
						"allDigest": this.Item.getList.allDigest,
						"digestState": this.Item.getList.digestState,
						"stickyState": this.Item.getList.stickyState,
						"contentType": this.Item.getList.contentType,
						"createdDays": this.Item.getList.createdDays,
						"createdDate": this.Item.getList.createdDate,
						"createdDateGt": this.Item.getList.createdDateGt,
						"createdDateLt": this.Item.getList.createdDateLt,
						"likeCountGt": this.Item.getList.likeCountGt,
						"likeCountLt": this.Item.getList.likeCountLt,
						"followCountGt": this.Item.getList.followCountGt,
						"followCountLt": this.Item.getList.followCountLt,
						"blockCountGt": this.Item.getList.blockCountGt,
						"blockCountLt": this.Item.getList.blockCountLt,
						"commentCountGt": this.Item.getList.commentCountGt,
						"commentCountLt": this.Item.getList.commentCountLt,
						"orderType": this.Item.getList.orderType,
						"orderDirection": this.Item.getList.orderDirection,
						"blockGroups": this.Item.getList.blockGroups,
						"blockHashtags": this.Item.getList.blockHashtags,
						"pluginRatingId": this.Item.getList.pluginRatingId,
						"pageSize": this.Item.getList.pageSize,
						"whitelistKeys":"group.gname,title,content,author.nickname,createdTimeAgo,files.images.0.imageBigUrl,pid"
					},
					(res) => {
						if(res.data.data.list.length){
							this.list = res.data.data.list;
							this.listState = "success"
						}else{
							this.listState = "empty"
						}
					}
				)
			}
		}
	}
</script>

<style lang="scss">
.block-horizontal-sliding-list{
	.post-list{
		scroll-view{
			width: 100%;
			height: 250rpx;
			white-space: nowrap;
			._for{
				width: 600rpx;
				height: 250rpx;
				margin: 0 0 0 25rpx;
				position: relative;
				display: inline-block;
				overflow: hidden;
				border-radius: 10rpx;
				background: $BeiJingSe;
				border: 1rpx solid $BianKuangSe;
				box-sizing: border-box;
				.image{
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
					width: 600rpx;
					height: 250rpx;
					background-color:rgba(0,0,0,0.6);
				}
				._for-box{
					width: 600rpx;
					height: 250rpx;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 2;
					display: flex;
					justify-content:space-between;
					flex-flow: column;
					._top{
						line-height: 28rpx;
						display: flex;
						align-items: center;
						justify-content:space-between;
						padding: 20rpx 25rpx 0 25rpx;
						._top-left{
							display: flex;
							align-items: center;
							.icon-remen{
								width: 40rpx;
								height: 40rpx;
								border-radius: 100rpx;
								background: $HongSe;
								display: flex;
								align-items: center;
								justify-content: center;
								line-height: 30rpx;
								font-size: 30rpx;
								color: #FFF;
								margin-right: 10rpx;
							}
							.text{
								font-size: 28rpx;
								font-weight: bold;
								color: #FFF;
								text-shadow: 0 0 3rpx #000;
							}
						}
					}
					._bottom{
						._title{
							font-size: 32rpx;
							line-height: 45rpx;
							color: #FFF;
							text-shadow: 0 0 3rpx #000;
							display: -webkit-box;
							/*!autoprefixer:off*/
							-webkit-box-orient: vertical;
							/*autoprefixer:on*/
							-webkit-line-clamp: 2;
							overflow: hidden;
							margin: auto 25rpx 0 25rpx;
							white-space: normal;
							font-weight: bold;
						}
						._info{
							display: flex;
							line-height: 22rpx;
							padding: 10rpx 0 25rpx 25rpx;
							text{
								font-size: 22rpx;
								color: #FFF;
								text-shadow: 0 0 3rpx #000;
								padding-right: 10rpx;
							}
						}
					}
				}
			}
			._for:last-child{
				margin-right: 25rpx;
			}
		}
	}
}
</style>